<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible.sync="previewDialogVisible"
      width="50%"
      :before-close="previewClose"
    >
      <div class="preview-head">
        <h3>{{previewData.title}}</h3>
        <span>{{previewData.createTime | format}}</span>
        <span>{{previewData.username}}</span>
        <span>{{previewData.visits}}</span>
      </div>
      <div class="preview-body">
        <div v-html="previewData.articleBody"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewClose">取 消</el-button>
        <el-button type="primary" @click="previewClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/filters/index'
export default {
  data() {
    return {}
  },
  filters: {
    format(value) {
      return parseTime(value)
    },
  },
  props: {
    previewDialogVisible: {
      type: Boolean,
    },
    previewData: {
      type: Object,
    },
  },
  methods: {
    previewClose() {
      console.log(1)

      this.$emit('closeDialog')
    },
  },
}
</script>

<style scoped lang="less">
.el-input {
  width: 200px;
}
.el-option {
  margin-right: 5px;
}
.el-select {
  margin-right: 10px;
}
.tops {
  margin-bottom: 10px;
}
.el-alert--info {
  margin-bottom: 8px;
}
.el-pagination {
  float: right;
  margin-top: 8px;
}
.ql-align-center img {
  width: 600px !important;
}
.ql-editor {
  min-height: 280px;
}
.el-table__row i {
  color: blue;
}
</style>
